<template>
	<view class="content">
		<!-- 头部信息内容 -->
		<view class="top">
			<view class="bg"></view>
			<view class="bg2"></view>
			<view class="title">华北水院自习室</view>
			<view class="my-bar">
				<view class="my-bar-item">
					<image class="my-bar-item-icon" src="../../static/images/gonggao.png"></image>
					<view style="height: 10rpx;"></view>
					<view class="my-bar-item-text">新闻公告</view>
				</view>
				<view class="my-bar-item">
					<image class="my-bar-item-icon" src="../../static/images/zuowei.png"></image>
					<view style="height: 10rpx;"></view>
					<view class="my-bar-item-text">座位预约</view>
				</view>
				<view class="my-bar-item">
					<image class="my-bar-item-icon" src="../../static/images/chuwukui.png"></image>
					<view style="height: 10rpx;"></view>
					<view class="my-bar-item-text">储物柜预约</view>
				</view>
			</view>
		</view>
		<view style="height: 615rpx;width: 100%;"></view>
		<!-- 附近自习室 -->
		<view class="h-title g-p-l h-title-color">附近自习室</view>
		<view style="display: flex;flex-direction: column;justify-content:start;align-items: center;gap: 22rpx;">

			<view class="g-card g-item-card" v-for="item in roomData">
				<navigator url="/pages/reserve/reserve">
					<view class="g-padding card-content">
						<view>
							<image style="height: 230rpx; width: 230rpx;"
								:src=item.image>
							</image>
						</view>
						<view>
							<view style="font-size: 38rpx; color: #333; font-weight: bold;">{{item.name}}</view>
							<view class="g-h"></view>
							<view
								style="display: flex; align-items: center;  color: #333; font-size: 34rpx;gap: 10rpx;">
								<image src="../../static/images/sign.png" style="width: 40rpx; height: 40rpx;"></image>
								座位容量：{{item.nums}}个
							</view>
							<view class="g-h"></view>
							<view style="color: #999;line-height: 50rpx; font-size: 34rpx;">
								{{item.content}}
							</view>
						</view>
					</view>
				</navigator>
			</view>



			<view></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				iconType: ['success'],
				roomData:[
					{
						"image":"https://pic2.zhimg.com/v2-10c2450cc4a76f09ac5ae5c50b1dcaf9_r.jpg",
						"name":"测试自习室",
						"nums":100,
						"content":"内容介绍内容介绍内容介绍"
					},
					{
						"image":"https://pic2.zhimg.com/v2-10c2450cc4a76f09ac5ae5c50b1dcaf9_r.jpg",
						"name":"测试自习室2",
						"nums":95,
						"content":"内容介绍内容介绍内容介绍"
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			ttt: function() {
				this.title = "a"
			},
			abcddb: function() {

				console.log("asdf")
			}
		}
	}
</script>

<style>
	.card-content {
		display: flex;
		justify-content: space-between;
		gap: 25rpx;
	}

	.bg,
	.bg2 {
		height: 500rpx;
		width: 100%;
		line-height: 540rpx;
		position: absolute;
		top: 0px;
	}

	.my-bar {
		width: 94%;
		background-color: #fff;
		height: 230rpx;
		position: absolute;
		z-index: 50;
		border-radius: 10rpx;
		top: 385rpx;
		left: 3%;
		display: flex;
		justify-content: space-evenly;
		box-shadow: 1rpx 1rpx 21rpx 2rpx #ccc;
		overflow: hidden;
		align-items: center;
	}

	.my-bar-item {
		text-align: center;
	}

	.my-bar-item-text {
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
	}

	.my-bar-item-icon {
		width: 110rpx;
		height: 110rpx;
	}

	.title {
		top: 233rpx;
		position: absolute;
		text-align: center;
		width: 100%;
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}

	.bg {
		background: url("https://p1.itc.cn/q_70/images01/20210517/db0a311af9654173a3817f453b2d1a99.jpeg") 0 0 no-repeat #ccc;
		background-size: 100% 100%;
	}

	.top .bg2 {
		background-color: #fff;
		opacity: 0.4;
	}
</style>